import React from "react";
import "./App.css";

//声明一个类式组件
export default class App extends React.Component {
  // render 方法中的 this 指向『实例对象』
  // /images/1.jpg
  // /images/2.jpg
  // /images/3.jpg
  // /images/4.jpg
  // /images/5.jpg

  state = {
    id: 1,
  };

  render() {
    return (
      <div className="slider">
        <img width="100%" src={`/images/${this.state.id}.jpg`} />
        <div className="prev btn" onClick={this.prevSlide}>&lt;</div>
        <div className="next btn" onClick={this.nextSlide}>
          &gt;
        </div>
      </div>
    );
  }

  //下一张
  nextSlide = () => {
    //获取当前的 id 值
    let {id} = this.state;
    //先自增
    id = id + 1;
    //判断 id 值
    if(id > 5){
      id = 1;
    }
    this.setState({
      id: id
    });
  };

  //上一张
  prevSlide = () => {
    //获取当前的 id 值
    let {id} = this.state;
    //先自增
    id = id - 1;
    //判断 id 值
    if(id < 1){
      id = 5;
    }
    this.setState({
      id: id
    });
  }
}
